<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>

    <title>Document</title>
</head>

<body>



    <div id="example1" class="demo">
        <div v-bind:id="dynamicId">mustache不能再attribute中使用</div>
        <button v-bind:disabled="isButtonDisabled">按钮 如果 isButtonDisabled 的值是 truthy[1]，那么 disabled attribute 将被包含在内。如果该值是一个空字符串，它也会被包括在内，与 {{ button }} 保持一致。</button>


        <div v-bind:id="'list-' + id"></div>
        {{ number + 1 }}

        {{ ok ? 'YES' : 'NO' }}

        {{ message.split('').reverse().join('') }}

        <span>实时改变: {{ msg }}</span>
        <span v-once>这个将不会改变: {{ msg }}</span>

        <p>Using mustaches 会将内容解释为普通文本: {{ rawHtml }}</p>
        <p>输出真正的html: <span v-html="rawHtml"></span></p>
    </div>
    <script type="text/javascript">

        const RenderHtmlApp = {
            data() {
                return {
                    rawHtml: '<span style="color: red">This should be red.</span>',
                    isButtonDisabled: true,
                    dynamicId: 1,
                    button: "<button disabled=></span>"
                }
            }
        }

        Vue.createApp(RenderHtmlApp).mount('#example1')
    </script>
</body>

</html>